<template>
        <el-row type="flex" align="middle">
            <div class="retarget-left">
                <div class="logic-tilte" v-if="showtab">
                    <span @click="cutlogic=1" :class="{active:cutlogic==1}">定向池
                    </span>
                    <span @click="cutlogic=2" :class="{active:cutlogic==2}">排除池
                    </span>
                </div>
                <div class="tab-content">
                    <div v-show="cutlogic==1" style="margin-top: 15px;">
                        <el-input placeholder="请输入人群包名称或ID" size="small"
                            v-model.trim="prologic_search" class="input-with-select"
                            style="width: 375px;">
                            <el-button slot="append" icon="el-icon-search">
                            </el-button>
                        </el-input>
                        <div class="select-panel-left panel-logic">
                            <span class="header-title">
                                <el-row type="flex">
                                    <el-row type="flex" align="middle"
                                        class="logic-title-qun">人群包
                                        <div class="logic-icon">
                                            <i class="el-icon-caret-top"></i>
                                            <i class="el-icon-caret-bottom"></i>
                                        </div>
                                    </el-row>
                                    <div class="logic-title-sx">
                                        <el-dropdown>
                                            <span class="el-dropdown-link">
                                                属性<i
                                                    class="el-icon-arrow-down el-icon--right"></i>
                                            </span>
                                            <el-dropdown-menu slot="dropdown">
                                                <el-dropdown-item>全部
                                                </el-dropdown-item>
                                                <el-dropdown-item>自定义
                                                </el-dropdown-item>
                                                <el-dropdown-item>系统推荐
                                                </el-dropdown-item>
                                                <el-dropdown-item>第三方
                                                </el-dropdown-item>
                                            </el-dropdown-menu>
                                        </el-dropdown>
                                    </div>
                                    <el-row type="flex" align="middle"
                                        class="logic-title-time">创建时间
                                        <div class="logic-icon">
                                            <i class="el-icon-caret-top"></i>
                                            <i class="el-icon-caret-bottom"></i>
                                        </div>
                                    </el-row>
                                </el-row>
                            </span>
                            <ul>
                                <el-checkbox-group v-model="selectedData">
                                    <li v-for="prologic in prologicList"
                                        :key="prologic.custom_audience_id">
                                        <el-checkbox :label="prologic.custom_audience_id" :disabled="isDisabled(1, prologic.custom_audience_id)" @change="$handleSelect">
                                            <el-row type="flex" align="middle">
                                                <div class="logic-name">
                                                    {{prologic.name}}({{prologic.upload_num}})
                                                </div>
                                                <span class="logic-tag">荐</span>
                                                <div class="logic-attribute">
                                                    {{prologic.tag}}</div>
                                                <div class="logic-time">
                                                    {{prologic.create_time}}
                                                </div>
                                            </el-row>
                                        </el-checkbox>
                                    </li>
                                </el-checkbox-group>
                            </ul>
                        </div>
                    </div>
                    <div v-show="cutlogic==2" style="margin-top: 15px;">
                        <el-input placeholder="请输入人群包名称或ID" size="small"
                            v-model="prologic_search" class="input-with-select"
                            style="width: 375px;">
                            <el-button slot="append" icon="el-icon-search">
                            </el-button>
                        </el-input>
                        <div class="select-panel-left panel-logic">
                            <span class="header-title">
                                <el-row type="flex">
                                    <el-row type="flex" align="middle"
                                        class="logic-title-qun">人群包
                                        <div class="logic-icon">
                                            <i class="el-icon-caret-top"></i>
                                            <i class="el-icon-caret-bottom"></i>
                                        </div>
                                    </el-row>
                                    <div class="logic-title-sx">
                                        <el-dropdown>
                                            <span class="el-dropdown-link">
                                                属性<i
                                                    class="el-icon-arrow-down el-icon--right"></i>
                                            </span>
                                            <el-dropdown-menu slot="dropdown">
                                                <el-dropdown-item>全部
                                                </el-dropdown-item>
                                                <el-dropdown-item>自定义
                                                </el-dropdown-item>
                                                <el-dropdown-item>系统推荐
                                                </el-dropdown-item>
                                                <el-dropdown-item>第三方
                                                </el-dropdown-item>
                                            </el-dropdown-menu>
                                        </el-dropdown>
                                    </div>
                                    <el-row type="flex" align="middle"
                                        class="logic-title-time">创建时间
                                        <div class="logic-icon">
                                            <i class="el-icon-caret-top"></i>
                                            <i class="el-icon-caret-bottom"></i>
                                        </div>
                                    </el-row>
                                </el-row>
                            </span>
                            <ul>
                                <el-checkbox-group v-model="selectedData2">
                                    <li v-for="prologic in prologicList"
                                        :key="prologic.custom_audience_id">
                                        <el-checkbox :label="prologic.custom_audience_id" :disabled="isDisabled(2, prologic.custom_audience_id)" @change="$handleSelect">
                                            <el-row type="flex" align="middle">
                                                <div class="logic-name">
                                                    {{prologic.name}}({{prologic.upload_num}})
                                                </div>
                                                <span class="logic-tag">荐</span>
                                                <div class="logic-attribute">
                                                    {{prologic.tag}}</div>
                                                <div class="logic-time">
                                                    {{prologic.create_time}}
                                                </div>
                                            </el-row>
                                        </el-checkbox>
                                    </li>
                                </el-checkbox-group>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

            <i class="el-icon-d-arrow-right"></i>
            <div class="select-panel-left retarget-right">
                <span class="header-title">已选({{title}})<el-button @click="clear"
                        style="padding: 0;" type="text">清空
                    </el-button></span>
                <div class="logic-tilte" v-if="showtab">
                    <span @click="cutlogic=1" :class="{active:cutlogic==1}">定向池
                    </span>
                    <span @click="cutlogic=2" :class="{active:cutlogic==2}">排除池
                    </span>
                </div>
                <div class="tab-content">
                    <div v-show="cutlogic==1">
                        <ul>
                            <li class="dx-selected"
                                v-for="selected in selecteds"
                                :key="selected.custom_audience_id">
                                <el-row type="flex" justify="space-between"
                                    align="middle">
                                    {{selected.name}}<i @click="remove(selected.custom_audience_id)"
                                        class="el-icon-close"></i>
                                </el-row>
                            </li>
                        </ul>
                    </div>
                    <div v-show="cutlogic==2">
                        <ul>
                            <li class="dx-selected"
                                v-for="selected in selecteds2"
                                :key="selected.custom_audience_id">
                                <el-row type="flex" justify="space-between"
                                    align="middle">
                                    {{selected.name}}<i @click="remove2(selected.custom_audience_id)"
                                        class="el-icon-close"></i>
                                </el-row>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </el-row>
</template>
<style>

</style>
<script>
    export default {
        name: 'CrowdPicker',
        model: {
            prop: 'datas',
            event: 'change'
        },
        props:['showtab', 'title', 'datas', 'advertiser_id'],
        data() {
            return {
                loading: false,
                categoryData: [],
                cutlogic: 1,
                prologic_search: '',
                // prologicList: [],
                prologics: [],
                selectedData: [],
                selectedData2: [],
                // selecteds: [{
                //         id: 1,
                //         text: '一线城市',
                //         name: '电子秤/健康类仪器',
                //         num: '1000万'
                //     },
                //     {
                //         id: 2,
                //         text: '二线城市',
                //         name: '电子秤/健康类仪器',
                //         num: '1000万'
                //     }
                // ],
            }
        },
        computed: {
            prologicList: {
                get: function() {
                    if (this.prologic_search == '') {
                        return this.prologics
                    }
                    return this.prologics.filter(ele=> {
                        return ele.name.indexOf(this.prologic_search) != -1
                    })
                }
            },
            selecteds: {
                get: function() {
                    let ret = []
                    this.selectedData.forEach(e => {
                        let p = this.prologics.find(ele => {
                            return ele.custom_audience_id == e
                        })
                        if (p) {
                            ret.push(p)
                        }
                    })
                    return ret
                }
            },
            selecteds2: {
                get: function() {
                    let ret = []
                    this.selectedData2.forEach(e => {
                        let p = this.prologics.find(ele => {
                            return ele.custom_audience_id == e
                        })
                        if (p) {
                            ret.push(p)
                        }
                    })
                    return ret
                }
            }

        },
        created() {
            let param = {advertiser_id: this.advertiser_id}
            this.$axios.get('/custom_audience/select', param).then(e => {
                this.prologics = e.data
                // this.selected.push(0)
                // console.log("prologics", this.datas)
                if (this.datas && this.datas.length > 1) {
                    this.selectedData = this.datas[0]
                    this.selectedData2 = this.data[1]
                }
            })
        },
        methods: {
            isDisabled: function(tabid, id) {
                if (!this.showtab) {
                    return false
                }
                if (tabid == 1) {
                    return this.selectedData2.indexOf(id) != -1
                } else {
                    return this.selectedData.indexOf(id) != -1
                }
            },
            remove: function(id) {
                let idx = this.selectedData.indexOf(id)
                if (idx != -1) {
                    this.selectedData.splice(idx, 1)
                }
                this.$handleSelect()
            },
            remove2: function(id) {
                let idx = this.selectedData2.indexOf(id)
                if (idx != -1) {
                    this.selectedData2.splice(idx, 1)
                }
                this.$handleSelect()
            },
            clear: function() {
                this.selectedData = []
                this.selectedData2 = []
                this.$handleSelect()
            },
            //当批量选中结束调用
            $handleSelect(){
                this.$emit('change', [this.selectedData, this.selectedData2])
            },
        }
    }
</script>